<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用DEMO</title>
    <link href='./scripts/bootstrap/css/bootstrap.min.css' rel='stylesheet' />
    <link href='./scripts/bootstrap/bootstrap-table/bootstrap-table.css' rel='stylesheet' />
    <!-- <link href='./examples/css/bootstrap-responsive.min.css' rel='stylesheet' /> -->
    <script src="./libs/SuperMap.Include.js"></script>
    <script src="./layer/JXCHLayer.js"></script>
    <!-- <script src="./examples/js/plottingPanel/PlottingPanel.Include.js"></script> -->
    <style type="text/css">
        html,body
        {
            width: 99.6%;
            height: 98.9%;
            overflow: hidden;
        }

        #mapInfo{
          height: 100%;
          width: 100%;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }

        #div2{
            /*width:200px;
            height:450px;
            position:absolute;
            bottom:30px;
            right: 30px;
            border: 1px solid black;
            background-color: white;*/

            right:15px;
            bottom:15px;
            height:250px;
            width: 150px;
            position: absolute;
            border: 2px solid #D6E3F1;
            background:white;
            z-index: 9999;
            border-top-width: 0px;
            display: block;
        }

        #title{
          width: 100%;
          height: 30px;
          background-color: #5Fb8f1;
          text-align: center;
          padding-top: 6px;
          color: white;
        }

        #title1{
          width: 100%;
          height: 30px;
          background-color: #5Fb8f1;
          padding-left: 15px;
          padding-top: 6px;
          color: white;
        }

        .closeBtn{
          width: 25px;
          height: 25px;
          background:url('./theme/images/rdp.png') center center;
          border: none;
          margin-left: 5px;
          margin-top: 7px;
        }

        .div3{
          width: 100%;
          height: 40px;
        }

        .img{
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
          margin-left: 15px;
          margin-top: 8px;
        }

        .spa{
          color: black;
          font-size: 16px;
          margin-left: 0px;
          display: inline-block;
          vertical-align: middle;
          margin-top: 5px;
        }

        .btn{
          margin-left: 8px;
          margin-top: 3px;
        }

        table tr:nth-child(odd){
          background: #ccc;
        }

        #div4{
            /*width:200px;
            height:450px;
            position:absolute;
            bottom:30px;
            right: 30px;
            border: 1px solid black;
            background-color: white;*/

            left: 10px;
            top: 100px;
            height:485px;
            width: 300px;
            position: absolute;
            border: 2px solid #D6E3F1;
            background:white;
            z-index: 9999;
            border-top-width: 0px;
            display: block;
        }

        #inputdiv{
          margin-left:5px;
          margin-top:5px;
          width:190px;
          display: inline-block;
        }

        #selectdiv{
          display: inline-block;
          margin-left:5px;
          margin-top:5px;
          display:inline-block;
          width:85px;
          display: inline-block;
        }

    </style>
    <script type="text/javascript">
        //声明变量map、layer、url
        var map,lineLayer,drawLine,drawPolygon, polygonLayer;
        var markerlayer ,marker;
        var ylLayer,hdsweiLayer,hdswenLayer,skswLayer;
        var ifSelect = false;
        var style = {
          strokeColor: "#304DBE",
          strokeWidth: 2,
          pointerEvents: "visiblePainted",
          fillColor: "#304DBE",
          fillOpacity: 0.8
        };
        var waterLayer, jxXZQHLayer, jxXZQHZJLayer;
        // var stationLayer;
        var waterUrl = "http://10.36.5.46:8080/iserver/services/map-JX_SLPC_NEW_29/rest/maps/JX_V";

        var xzhqUrl = "http://10.36.5.70:9010/ZHL140325/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec20140318&FORMAT=image/tile&TILEMATRIXSET=Matrix_0";
        var zxhqzjUrl = "http://10.36.5.70:9010/ZHLZJ140325/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=Poi325&FORMAT=image/tile&TILEMATRIXSET=Matrix_0";

        // var stationUrl = "http://10.36.5.70:9010/IMGL7_L17/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=IMGL7_L17s&FORMAT=image/tile&TILEMATRIXSET=Matrix_0&OFFLEVEL=7";

        var dataArr = [{"add":"江西进贤县梅庄镇镇政府500M处",       "name":" 进贤       ","num":"623A1400","lon":116.411650,"lat":28.570000,"type":"SS"},
{"add":"江西进贤县梅庄镇镇政府500M处",       "name":" 进贤       ","num":"623A1401","lon":116.411650,"lat":28.570000,"type":"SS"},
{"add":"江西省临川区鹏田乡",            	"name":"  	廖坊  ","num":"62401300","lon":116.631400,"lat":27.752500,"type":"RR"},
{"add":"抚州市临川区         ",            "name":"  	廖坊坝下*  ","num":"62401350","lon":116.633333,"lat":27.750000,"type":"RR"},
{"add":"石门乡窑上村         ",              "name":" 窑上       ","num":"62401550","lon":116.300000,"lat":27.550000,"type":"PZ"},
{"add":"浒湾镇上市村         ",              "name":" 上市       ","num":"62401650","lon":116.300000,"lat":27.550000,"type":"PZ"},
{"add":"临川区湖南乡高堑村      ",          "name":" 	廖家湾     ","num":"62401800","lon":116.400300,"lat":27.975600,"type":"ZQ"},
{"add":"江西省抚州市临川区解放桥   ",       "name":" 	解放桥     ","num":"62402200","lon":116.359400,"lat":27.997800,"type":"ZZ"},
{"add":"江西进贤县李渡镇焦石村    ",      "name":"   	焦石坝水库 ","num":"62402300","lon":116.167000,"lat":28.167000,"type":"RR"},
{"add":"江西进贤县李渡镇       ",           "name":" 	李家渡     ","num":"62402400","lon":116.158972,"lat":28.217555,"type":"ZQ"},
{"add":"江西进贤县李渡镇       ",           "name":" 	柴埠口     ","num":"62402600","lon":116.178583,"lat":28.232333,"type":"ZZ"},
{"add":"江西进贤县李渡镇       ",            "name":" 焦石       ","num":"62402800","lon":116.152583,"lat":28.211472,"type":"ZZ"},
{"add":"江西南昌县黄马乡       ",           "name":" 	箭江口     ","num":"62402900","lon":116.088100,"lat":28.286700,"type":"ZZ"},
{"add":"江西进贤县温圳镇       ",           "name":" 	温家圳     ","num":"62403000","lon":116.076972,"lat":28.341888,"type":"ZZ"},
{"add":"南城县徐家乡白洲村      ",          "name":" 	八堡堤     ","num":"62405820","lon":116.647500,"lat":27.623300,"type":"ZZ"},
{"add":"江西省南城县建昌镇姚家巷村  ",     "name":"  	麻源水库   ","num":"62405860","lon":116.576400,"lat":27.565800,"type":"RR"},
{"add":"金溪县石门乡石门村      ",           "name":" 石门       ","num":"62429500","lon":116.658600,"lat":27.779200,"type":"PP"},
{"add":"金溪县石门乡下彭村      ",           "name":" 下彭       ","num":"62429560","lon":116.373000,"lat":27.492000,"type":"PP"},
{"add":"金溪县秀谷镇政府       ",            "name":" 金溪       ","num":"62429600","lon":116.760600,"lat":27.914400,"type":"PP"},
{"add":"金溪县浒湾镇浒湾村      ",           "name":" 浒湾       ","num":"62429900","lon":116.300000,"lat":27.550000,"type":"ZZ"},
{"add":"金溪县浒湾镇黄坊村      ",           "name":" 黄坊       ","num":"62429920","lon":116.293000,"lat":27.563000,"type":"PP"},
{"add":"江西南昌县黄马乡官田村    ",         "name":" 官田       ","num":"62438380","lon":116.050000,"lat":28.311499,"type":"PP"},
{"add":"江西南昌县黄马乡蚕桑研究所  ",      "name":" 	蚕桑场     ","num":"62438420","lon":115.982200,"lat":28.405300,"type":"PP"},
// {"add":"江西抚州市临川区崇岗镇    ",         "name":" 临川       ","num":"624A1000","lon":116.379683,"lat":27.894167,"type":"SS"},
// {"add":"江西抚州市临川区崇岗镇    ",         "name":" 临川       ","num":"624A1001","lon":116.379683,"lat":27.894167,"type":"SS"},
// {"add":"江西南城县          ",               "name":" 南城       ","num":"624A2000","lon":116.611383,"lat":27.628000,"type":"SS"},
// {"add":"江西南丰县白舍镇       ",            "name":" 南丰       ","num":"624A3000","lon":116.458217,"lat":27.096833,"type":"SS"},
{"add":"江西省南城县里塔镇廖坊村   ",      "name":"  	若岭水库   ","num":"624R1260","lon":116.481900,"lat":27.379400,"type":"RR"},
{"add":"江西省南城县株良镇云市村   ",      "name":"  	高桥水库   ","num":"624R1280","lon":116.515600,"lat":27.457200,"type":"RR"},
{"add":"江西省南城县新丰街镇梅溪村  ",     "name":"  	沙窠水库   ","num":"624R1320","lon":116.601700,"lat":27.393900,"type":"RR"},
{"add":"江西省南城县株良镇杨梅村   ",      "name":"  	下坊水库   ","num":"624R1400","lon":116.587200,"lat":27.481700,"type":"RR"},
{"add":"江西省南城县新丰街镇田东村  ",     "name":"  	松沅水库   ","num":"624R1440","lon":116.608600,"lat":27.425800,"type":"RR"},
{"add":"江西省南城县万坊镇万坊村   ",     "name":"   	山中圩水库 ","num":"624R1640","lon":116.582800,"lat":27.624400,"type":"RR"},
{"add":"江西省南城县徐家乡湖东村   ",      "name":"  	石溪水库   ","num":"624R1660","lon":116.671100,"lat":27.620300,"type":"RR"},
{"add":"江西省金溪县石门乡公塘村   ",      "name":"  	付家水库   ","num":"624R1760","lon":116.633300,"lat":27.800000,"type":"RR"},
{"add":"江西省金溪县石门乡横源村   ",      "name":"  	厚坑水库   ","num":"624R1880","lon":116.690300,"lat":27.809400,"type":"RR"},
{"add":"江西省金溪县石门乡靖思村   ",      "name":"  	涂岭水库   ","num":"624R1860","lon":116.734700,"lat":27.806400,"type":"RR"},
{"add":"江西省临川区湖南平上     ",        "name":"  	五四水库   ","num":"624R2040","lon":116.478800,"lat":27.968200,"type":"RR"},
{"add":"江西省临川区湖南梅岗     ",        "name":"  	三八水库   ","num":"624R2060","lon":116.486100,"lat":27.985600,"type":"RR"},
{"add":"江西省临川区太阳湖溪     ",        "name":"  	辉煌水库   ","num":"624R3720","lon":116.496700,"lat":28.047200,"type":"RR"},
{"add":"江西省进贤县长山乡新居村委会 ",   "name":"   	朱家巷水库 ","num":"624R4202","lon":116.238000,"lat":28.223500,"type":"RR"},
{"add":"江西省进贤县长山乡      ",         "name":"  	新华水库   ","num":"624R4220","lon":116.224400,"lat":28.270900,"type":"RR"},
{"add":"江西省进贤县白圩乡连桥村委会 ",    "name":"  	干劲水库   ","num":"624R4240","lon":116.245000,"lat":28.271700,"type":"RR"},
{"add":"江西省进贤县白圩乡园艺村委会 ",    "name":"  	卫星水库   ","num":"624R4260","lon":116.265800,"lat":28.276700,"type":"RR"},
{"add":"江西南昌县墉南镇       ",            "name":" 红旗       ","num":"62606320","lon":116.183333,"lat":28.716666,"type":"ZZ"},
{"add":"江西进贤县三阳集乡      ",           "name":" 三阳       ","num":"62606800","lon":116.273083,"lat":28.619666,"type":"ZZ"},
{"add":"江西南昌县塔城乡       ",            "name":" 塔城       ","num":"62606340","lon":116.100000,"lat":28.500000,"type":"ZZ"},
{"add":"江西省丰城市袁渡镇雷徐村   ",     "name":"   	相狮象水库 ","num":"626R1460","lon":116.060000,"lat":28.170000,"type":"RR"},
{"add":"江西省丰城市袁渡镇尧家村   ",     "name":"   	老虎窟水库 ","num":"626R1480","lon":116.070000,"lat":28.200000,"type":"RR"},
{"add":"江西省丰城市袁渡镇河塘村   ",     "name":"   	芭蕉坑水库 ","num":"626R1500","lon":116.060000,"lat":28.230000,"type":"RR"},
{"add":"江西省进贤县温圳镇罗家村委会 ",    "name":"  	五九水库   ","num":"626R1580","lon":116.122300,"lat":28.371100,"type":"RR"},
{"add":"江西省进贤县白圩乡金山村委会 ",    "name":"  	梅家水库   ","num":"626R1740","lon":116.257800,"lat":28.603900,"type":"RR"},];

        //创建地图控件
        function init() {
            //新建线矢量图层
            lineLayer = new SuperMap.Layer.Vector(null);
            lineLayer.displayInLayerSwitcher = false;
            //对线图层应用样式style（前面有定义）
            lineLayer.style = style;

            //创建画线控制，图层是lineLayer;这里DrawFeature(图层,类型,属性)；multi:true在将要素放入图层之前是否现将其放入几何图层中
            drawLine = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, { multi: false });

            /*
            注册featureadded事件,触发drawCompleted()方法
            例如注册"loadstart"事件的单独监听
            events.on({ "loadstart": loadStartListener });
            */
            drawLine.events.on({"featureadded": drawCompleted});

            //新建面矢量图层
            polygonLayer = new SuperMap.Layer.Vector("面矢量图");
            polygonLayer.displayInLayerSwitcher = false;
            //对面图层应用样式style（前面有定义）
            polygonLayer.style = style;
            /*
            注册featureadded事件,触发drawCompleted()方法
            例如注册"loadstart"事件的单独监听
            events.on({ "loadstart": loadStartListener });
            */
            //创建画面控制，图层是polygonLayer
            drawPolygon = new SuperMap.Control.DrawFeature(polygonLayer, SuperMap.Handler.Polygon);
            drawPolygon.events.on({"featureadded": drawPolyCompleted});

            map = new SuperMap.Map("map", { controls:[
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Attribution(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions:{
                        enableKinetic:true
                    }
                }),
                drawLine,
                drawPolygon],
                allOverlays:true,
                projection:"EPSG:4326"
            });
            //创建分块动态REST图层，该图层显示iserver java 6R 服务发布的地图,
            //其中“world”为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
            // waterLayer = new SuperMap.Layer.TiledDynamicRESTLayer("jx_water", waterUrl,{transparent: true,cacheEnabled: true }, { maxResolution: "auto" });
            waterLayer = new SuperMap.Layer.TiledDynamicRESTLayer("水域", waterUrl,
            {transparent: true,cacheEnabled: true}, {maxResolution:"auto"});
            waterLayer.events.on({"layerInitialized": addLayer});

            jxXZQHLayer = new SuperMap.Layer.JXCHLayer("行政界", xzhqUrl);
            map.resolutions = jxXZQHLayer.resolutions;
            map.addLayer(jxXZQHLayer);

            jxXZQHZJLayer  = new SuperMap.Layer.JXCHLayer("行政区划", zxhqzjUrl);

            // stationLayer = new SuperMap.Layer.JXCHLayer("lalala",stationUrl)

            markerlayer = new SuperMap.Layer.Markers("污染位置");
            markerlayer.style = {
              cursor:"auto",
            };
            map.events.on({"click":getMousePositionPx}); //添加click事件
            addHandler(window,"resize",setposition);

            //ylLayer,hdsweiLayer,hdswenLayer,skswLayer

            ylLayer = new SuperMap.Layer.Markers("雨量站");
            ylLayer.style = {
              cursor:"auto",
            };

            hdsweiLayer = new SuperMap.Layer.Markers("河道水位站");
            hdsweiLayer.style = {
              cursor:"auto",
            };

            hdswenLayer = new SuperMap.Layer.Markers("河道水文站");
            hdswenLayer.style = {
              cursor:"auto",
            };

            skswLayer = new SuperMap.Layer.Markers("水库水文站");
            skswLayer.style = {
              cursor:"auto",
            };
        }

        function addLayer() {
            // map.addLayer(stationLayer);
            //将Layer图层加载到Map对象上
            map.addLayers([waterLayer,jxXZQHZJLayer,lineLayer,polygonLayer,markerlayer,ylLayer,hdsweiLayer,hdswenLayer,skswLayer]);
            // map.addLayer(jxXZQHZJLayer);
            map.zoomToExtent(new SuperMap.Bounds(113.54,24.5,118.444,30.0),false);
            map.setCenter(new SuperMap.LonLat(116.324756,28.002338), 4);

            var size = new SuperMap.Size(44,33);
            var offset = new SuperMap.Pixel(10, 20);
            var icon = new SuperMap.Icon('./theme/images/spread.gif', size, offset);
            marker =new SuperMap.Marker(new SuperMap.LonLat(116.324756,28.002338),icon) ;

            markerlayer.addMarker(marker);

            addStation();
        }

        function addStation(){
          for (var i = 0; i < dataArr.length; i++) {
              var size = new SuperMap.Size(44,33);
              var offset = new SuperMap.Pixel(10, 20);
              var icon;
              if (dataArr[i]['type'] == 'PP') {
                icon = new SuperMap.Icon('./theme/images/cluster1.png', size, offset);
              }else if (dataArr[i]['type'] == 'ZZ') {
                icon = new SuperMap.Icon('./theme/images/cluster2.png', size, offset);
              }else if (dataArr[i]['type'] == 'ZQ') {
                icon = new SuperMap.Icon('./theme/images/cluster3.png', size, offset);
              }else if (dataArr[i]['type'] == 'RR') {
                icon = new SuperMap.Icon('./theme/images/marker-gold.png', size, offset);
              }
              marker =new SuperMap.Marker(new SuperMap.LonLat(dataArr[i]['lon'],dataArr[i]['lat']),icon) ;
              marker.name = dataArr[i]['name'];
              marker.add = dataArr[i]['add'];
              marker.num = dataArr[i]['num'];
              marker.type = dataArr[i]['type']
              marker.events.on({"click":openStationInfoWin,
                     "touchstart":openStationInfoWin, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                     "scope": marker
              });
              // ylLayer,hdsweiLayer,hdswenLayer,skswLayer
              if (dataArr[i]['type'] == 'PP') {
                ylLayer.addMarker(marker);
              }else if (dataArr[i]['type'] == 'ZZ') {
                hdsweiLayer.addMarker(marker);
              }else if (dataArr[i]['type'] == 'ZQ') {
                hdswenLayer.addMarker(marker);
              }else if (dataArr[i]['type'] == 'RR') {
                skswLayer.addMarker(marker);
              }
            }
        }

        function distanceMeasure(){
            clearFeatures();
            drawLine.activate();
        }


          //绘完触发事件
          function drawCompleted(drawGeometryArgs) {
            //停止画面控制
            drawLine.deactivate();
            //获得图层几何对象
            var geometry = drawGeometryArgs.feature.geometry,
            measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
            myMeasuerService = new SuperMap.REST.MeasureService(waterUrl); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
            myMeasuerService.events.on({"processCompleted": measureCompleted });

            //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA

            myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;

            myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
          }

          //测量结束调用事件
          function measureCompleted(measureEventArgs) {
            var distance = measureEventArgs.result.distance;
            var unit = measureEventArgs.result.unit;
            alert("量算结果:"+distance + "米");
          }

          function areaMeasure(){
            clearFeatures();
            drawPolygon.activate();
          }

          //绘完触发事件
          function drawPolyCompleted(drawGeometryArgs) {
            //停止画面控制

            drawPolygon.deactivate();
            //获得图层几何对象
            var geometry = drawGeometryArgs.feature.geometry,
            measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
            myMeasuerService = new SuperMap.REST.MeasureService(waterUrl); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
            myMeasuerService.events.on({ "processCompleted": measurePolyCompleted });

            //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA

            myMeasuerService.measureMode = SuperMap.REST.MeasureMode.AREA;

            myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
          }

          //测量结束调用事件
          function measurePolyCompleted(measureEventArgs) {
            var area = measureEventArgs.result.area,
            unit = measureEventArgs.result.unit;
            alert("量算结果:"+ area + "平方米");
          }

          //移除图层要素
          function clearFeatures(){
            lineLayer.removeAllFeatures();
            polygonLayer.removeAllFeatures();
          }

          //添加数据
          function addData(lonlat){
            // markerlayer.removeMarker(marker);
            var size = new SuperMap.Size(44,33);
            var offset = new SuperMap.Pixel(-(size.w/2), -size.h);
            var icon = new SuperMap.Icon('./theme/images/marker.png', size, offset);
            marker =new SuperMap.Marker(new SuperMap.LonLat(lonlat.lon.toFixed(5),lonlat.lat.toFixed(5)),icon) ;
            marker.events.on({"click":openInfoWin,
                   "touchstart":openInfoWin, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                   "scope": marker
            });
            markerlayer.addMarker(marker);
          }

          //打开对应的信息框
          var infowin = null;
          function openInfoWin()
          {
            closeInfoWin();
            var marker = this;
            var lonlat = marker.getLonLat();
            var size = new SuperMap.Size(0, 33);
            var offset = new SuperMap.Pixel(11, -30);
            var icon = new SuperMap.Icon("./theme/images/marker.png", size, offset);
            var popup = new SuperMap.Popup.FramedCloud("popwin",
            new SuperMap.LonLat(lonlat.lon,lonlat.lat),
            null,
             '<div style = "width:455px;height:325px;border:1px solid #00BFFF;margin-top:8px;margin-left:10px" id = "allDiv">'
            +'<div style = "width:100%;height:40px;background-color:#00BFFF;">'
            +'<div style = "color:white;margin-left:15px;float:left;margin-top:10px;font-size:16px;width:auto;">人工填报</div>'
            +'<div style = "margin-left:330px;width:40px;height:40px;float:left;"><input type = "button" class = "closeBtn" value = "" onclick = "closeClick()"/></div>'
            +'</div>'
            +'<div style = "width:100%;height:50px;background-color:white">'
            + '<button type="button" class="btn btn-default" onclick = "save()" style = "margin-top:9px;margin-left:82%;">保存</button> '
            +'</div>'
            +'<div style = "margin-left:20px;margin-right:20px;height:254px;">'
            +'<div style = "margin-top:5px;margin-left:3px;width:80px;font-size:16px;display:inline-block">事件名称:</div>'
            +'<div style = "margin-top:5px;width:330px;font-size:16px;display:inline-block"> <input type="text" class="form-control"></div>'
            +'<div style = "margin-top:10px;width:80px;font-size:16px;display:inline-block">事件类型:</div>'
            +'<div style = "margin-top:10px;width:100px;font-size:16px;display:inline-block;"> <select class="form-control" onchange="selectOnchang(this)" id = "selectdiv">'
            +'<option>1</option>'
            +'<option>2</option>'
            +'<option>3</option>'
            +'<option>4</option>'
            +'</select></div>'
            +'<div style = "margin-top:10px;margin-left:3px;width:80px;font-size:16px;display:inline-block">发生时间:</div>'
            +'<div style = "margin-top:10px;width:150px;font-size:16px;display:inline-block;"><input type="date" class="form-control">'
            // <select class="form-control" onchange="selectOnchang(this)" id = "selectdiv">'
            // +'<option>1</option>'
            // +'<option>2</option>'
            // +'<option>3</option>'
            // +'<option>4</option>'
            // +'</select>'
            +'</div>'
            +'<div style = "margin-top:10px;margin-left:1px;width:80px;font-size:16px;display:inline-block;">发生区域:</div>'
            +'<div style = "margin-top:10px;width:330px;font-size:16px;display:inline-block"> <input type="text" class="form-control"></div>'
            +'<div style = "margin-left:3px;width:80px;height:80px;font-size:16px;margin-top:10px;float:left">事件描述:</div>'
            +'<div style = "margin-top:10px;width:330px;font-size:16px;height:80px;float:left;display:inline-block;"><textarea class="form-control" rows="3"></textarea></div>'
            +'</div>'
            +'</div>'
            ,
            icon,
            false);
            infowin = popup;
            map.addPopup(popup);
          }

          var stationInfowin = null;
          function openStationInfoWin(){
            closeStationInfowin();
            var marker = this;
            var lonlat = marker.getLonLat();
            var size = new SuperMap.Size(0, 33);
            var offset = new SuperMap.Pixel(30,20);
            var icon = new SuperMap.Icon("./theme/images/marker.png", size, offset);
            var popup = new SuperMap.Popup.FramedCloud("popwin",
            new SuperMap.LonLat(lonlat.lon,lonlat.lat),
            null,
            // '<div style = "width:400px;height:150px;" id = "allDiv">'
            // +'<div style = "width:100%;height:40px;background-color:#00BFFF;">'
            // +'<div style = "color:white;margin-left:15px;display:inline-block;margin-top:7px;font-size:16px;width:auto;">' + marker.name + '</div>'
            // +'<div style = "margin-left:160px;width:40px;height:40px;display:inline-block;"><input type = "button" class = "closeBtn" value = "" onclick = "closeClick()"/></div>'
            // +'</div>'
            // +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">序号 : '+ marker.num + '</div>'
            // +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">地址 : '+ marker.add + '</div>'
            // +'</div>'

            '<div style = "width:300px;height:100px;margin-top:8px;margin-left:10px" id = "allDiv">'
            +'<div style = "width:100%;height:40px;background-color:#00BFFF;">'
            +'<div style = "color:white;display:inline-block;font-size:16px;margin-left:15px;width:195px;">'+ trim(marker.name) +'</div>'
            +'<div style = "width:40px;height:40px;display:inline-block;margin-left:40px;"><input type = "button" class = "closeBtn" value = "" onclick = "closeStation()"/></div>'
            +'</div>'
            +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">测站编码 : '+ trim(marker.num) + '</div>'
            +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">地址 : '+ trim(marker.add) + '</div>'
            +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">水位 : 23.9 m </div>'
            +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">流量 : 46.23 m<sup>3</sup></div>'
            +'</div>'
            ,
            icon,
            false);
            stationInfowin = popup;
            map.addPopup(popup);
          }

          //关闭信息框
          function closeStationInfowin(){
            if(stationInfowin){
              try{
                stationInfowin.hide();
                stationInfowin.destroy();
              }
              catch(e){}
            }
          }

          function trim(s){
            return s.replace(/(^\s*)|(\s*$)/g, "");
          }

          //关闭信息框
          function closeInfoWin(){
            if(infowin){
              try{
                infowin.hide();
                infowin.destroy();
              }
              catch(e){}
            }
          }

          function closeClick(){
            infowin.hide();
          }

          function closeStation(){
            stationInfowin.hide();
          }

          function getMousePositionPx(e)
          {
            if (!ifSelect) return;

            ifSelect = false;
            if(window.confirm('您确定要添加人工报警？')){
              var lonlat= map.getLonLatFromPixel(new SuperMap.Pixel(e.xy.x,e.xy.y));
              addData(lonlat);
              return true;
            }else{
              return false;
            }
          }

          function addHandler(element,type,handler){
            if(element.addEventListener){
              element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
              element.attachEvent("on"+type,handler);
            } else{
              element["on"+type] =handler;
            }
          }

          function setposition(){
            var width= map.getSize().w;
            document.getElementById("mousePositionDiv").style.left=width/2-160+"px" ;
          }

          function resetMap(){
            map.setCenter(new SuperMap.LonLat(116.324756,28.002338), 4);
          }

          function mark(){
            ifSelect = true;
          }

          function cancel(){
          }

          function save(){

          }

          function switchMap(){
            var gisMap = document.getElementById("map");
            var baiDuMap = document.getElementById("baiDu");

            if (gisMap.style.display == 'block') {
              baiDuMap.style.display= 'block';
              gisMap.style.display= 'none';
            }else {
              baiDuMap.style.display= 'none';
              gisMap.style.display= 'block';
            }
          }
    </script>
</head>
<body onload="init()">

<div id="map" style="width: 99.8%;height: 94%;position: relative;display:none">
  <div id="toolbar">
    <input type="button" class="btn btn-default" value="距离量算" onclick="distanceMeasure()" />
    <input type="button" class="btn btn-default" value="面积量算" onclick="areaMeasure()" />
    <input type="button" class="btn btn-default" value="清除" onclick="clearFeatures()" />
    <input type="button" class="btn btn-default" value="全屏" onclick="resetMap()" style = ""/>
    <input type="button" class="btn btn-default" value="地图切换" onclick="switchMap()" />
    <input type="button" class="btn btn-default" value="人工报警" onclick="mark()" />

  </div>
  <div id="div4" >
    <div id="title1" >实时水雨情</div>
    <input type="text" class="form-control" id ="inputdiv">
    <select class="form-control" onchange="selectOnchang(this)" id = "selectdiv">
      <option>雨量</option>
      <option>水位</option>
      <option>水质</option>
      <option>取水</option>
      <option>排污</option>
    </select>
    <div style="margin-top:10px;height:400px;width:100%;">
      <div style = "width:60px;height:34px;line-height:32px;border-right:1px solid #d1d1d1;display:inline-block;text-align:center;">序号</div>
      <div style = "width:115px;height:34px;line-height:32px;border-right:1px solid #d1d1d1;display:inline-block;text-align:center;">站名</div>
      <div style = "width:105px;height:34px;line-height:32px;display:inline-block;text-align:center;">雨量</div>
      <table class = "table"  width="300px" height="200px"style="overflow:scroll;text-align:center">
        <tr><td>1</td><td>版石</td><td>25.3101</td></tr>
        <tr><td>2</td><td>蔡坊</td><td>25.3037</td></tr>
        <tr><td>3</td><td>长沙</td><td>25.4752</td></tr>
        <tr><td>4</td><td>龙头</td><td>25.2222</td></tr>
        <tr><td>5</td><td>车头</td><td>25.1918</td></tr>
        <tr><td>6</td><td>浮搓</td><td>25.5424</td></tr>
        <tr><td>7</td><td>濂丰</td><td>25.1717</td></tr>
        <tr><td>8</td><td>高云山</td><td>25.1717</td></tr>
        <tr><td>9</td><td>龙布</td><td>25.4783</td></tr>
        <tr><td>10</td><td>双芜</td><td>25.4933</td></tr>
      </table>
    </div>

  </div>

  <div id="div2" >
    <div id="title">图例</div>
    <div class="div3">
      <img src="theme/images/cluster1.png" class="img">
      <div class="spa">雨量站</div>
    </div>
    <div class="div3">
      <img src="theme/images/cluster2.png" class="img">
      <div class="spa">河道水位站</div>
    </div>
    <div class="div3">
      <img src="theme/images/cluster3.png" class="img">
      <div class="spa">河道水文站</div>
    </div>
    <div class="div3">
      <img src="theme/images/marker-gold.png" class="img">
      <div class="spa">水库水文站</div>
    </div>
    <div class="div3">
      <img src="theme/images/marker.png" class="img">
      <div class="spa">人工报警</div>
    </div>
  </div>
</div>
<iframe src="./baidu.html"  id='baiDu' class="mapInfo" style="width: 100%;height: 100%;"></iframe>


</body>
</html>
